<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<title>更新管理员 - 用户中心</title>
<%@ include file="/common/include/title.jsp"%>
<meta name="keywords"
	content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description"
	content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript"
	src="${rootPath }/common/resource/H-ui.admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript"
	src="${rootPath }/common/resource/H-ui.admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript"
	src="${rootPath }/common/resource/H-ui.admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
</head>
<body>
	<article class="page-container">
		<!-- 
				application/x-www-form-urlencoded:纯文本提交
				multipart/form-data:二进制流的方式提交
			 -->
		<form class="form form-horizontal" id="form-admin-add"
			enctype="multipart/form-data">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>邮箱：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text"
						value="${requestScope.admins.email }" placeholder="" id="email"
						name="email">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>真实姓名：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text"
						value="${requestScope.admins.trueName }" placeholder=""
						id="trueName" name="trueName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>qq：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text"
						value="${requestScope.admins.qq }" placeholder="" id="qq"
						name="qq">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>手机：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text"
						value="${requestScope.admins.phone }" placeholder="" id="phone"
						name="phone">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>性别：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<label for="sex0"> <!-- 目前:状态应该是数据库里面选中的效果 --> <input
						type="radio" value="0" placeholder=""
						${'0' == requestScope.admins.sex ? 'checked' : '' } id="sex0"
						name="sex">未知
					</label> <label for="sex1"> <!-- 目前:状态应该是数据库里面选中的效果 --> <input
						type="radio" value="1" placeholder=""
						${'1' == requestScope.admins.sex ? 'checked' : '' } id="sex0"
						name="sex">男
					</label> <label for="sex0"> <!-- 目前:状态应该是数据库里面选中的效果 --> <input
						type="radio" value="2" placeholder=""
						${'2' == requestScope.admins.sex ? 'checked' : '' } id="sex2"
						name="sex">女
					</label>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>状态：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<label for="status0"> <!-- 目前:状态应该是数据库里面选中的效果 --> <input
						type="radio" value="0" placeholder=""
						${'0' == requestScope.admins.status ? 'checked' : '' }
						id="status0" name="status">禁用
					</label> <label for="status1"> <!-- 目前:状态应该是数据库里面选中的效果 --> <input
						type="radio" value="1" placeholder=""
						${'1' == requestScope.admins.status ? 'checked' : '' }
						id="status1" name="status">启用
					</label>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>头像：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="file" class="input-text"
						value="${requestScope.admins.phone }" placeholder="" id="file"
						name="file">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"><span
					class="c-red">*</span>原头像：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<a href="${rootPath }${requestScope.admins.photoPath}"
						target="_blank"> <img alt=""
						src="${rootPath }${requestScope.admins.photoPath}" width="150"
						height="150" style=" border-radius:50%;">
					</a>
				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary radius" type="submit"
						value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
				</div>
			</div>
		</form>
	</article>

	<script type="text/javascript">
		$(function() {
			$('.skin-minimal input').iCheck({
				checkboxClass : 'icheckbox-blue',
				radioClass : 'iradio-blue',
				increaseArea : '20%'
			});
			/* 此是对表单进行验证
				js对表单的验证要想工作起来得注意以下几点:
				~表单的id不能随便写,必须和$("#")一样
				~表单里面有好多控件:
			 */
			$("#form-admin-add")
					.validate(
							{
								/* role:角色,rule:规则 */
								rules : {
									/* adminName:指的是控件的name和id;最好保持一致 */
									adminName : {
										/* 必须 */
										required : true,
										/* 最小长度 */
										minlength : 4,
										/* 最大长度 */
										maxlength : 16
									},
									password : {
										required : true,
									},
									password2 : {
										required : true,
										/* 两次密码一样 */
										equalTo : "#password"
									},
									sex : {
										required : true,
									},
									phone : {
										required : true,
										isPhone : true,
									},
									email : {
										required : true,
										/* 验证邮箱吧;邮箱的正则表达式,不用你写了 */
										email : true,
									},
									adminRole : {
										required : true,
									},
									name : {
										/* 必须 */
										required : true,
										/* 最小长度 */
										minlength : 2,
										/* 最大长度 */
										maxlength : 20
									},
									capital : {
										/* 必须 */
										required : true,
										/* 最小长度 */
										minlength : 2,
										/* 最大长度 */
										maxlength : 20
									},
									age : {
										/* 必须 */
										required : true,
										/* 最小长度 */
										minlength : 1,
										/* 最大长度 */
										maxlength : 20,
										number : true,
									},
								},
								onkeyup : false,
								focusCleanup : true,
								success : "valid",
								submitHandler : function(form) {
									/* ajax: */
									$(form)
											.ajaxSubmit(
													{
														type : 'post',
														url : "${rootPath}/AdminsBackServlet?method=adminsUpdateSubmit",
														/* 信的内容已经默认的会将表单中所有的控件提交给服务器 */
														success : function(data) {
															//console.info(data + "------>" + data.info)
															/* data:表示服务器返回的内容
															返回的是Service返回的JSON,直接拿过来使用*/
															layer
																	.msg(
																			data.info,
																			{
																				icon : 1,
																				time : 5000
																			},
																			function() {
																				/* 关闭当前的选项卡 */
																				var index = parent.layer
																						.getFrameIndex(window.name);
																				parent
																						.$(
																								'.btn-refresh')
																						.click();
																				/* 模拟点击了一下刷新按钮 */
																				parent
																						.$(
																								'.btn-success')
																						.click();
																				parent.layer
																						.close(index);
																			});
														},
														error : function(
																XmlHttpRequest,
																textStatus,
																errorThrown) {
															layer
																	.msg(
																			'error!',
																			{
																				icon : 1,
																				time : 1000
																			});
														},
														"dataType" : "json"
													});
								}
							});
		});
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>